layui.use(['form','layer','table','laytpl'],function(){
    var form = layui.form,
        layer = parent.layer === undefined ? layui.layer : top.layer,
        $ = layui.jquery,
        laytpl = layui.laytpl,
        table = layui.table;

    //加载日志分析任务列表
    $.get('/log/analysejob/list',function (data) {
        $.each(data.data,function (i, ele) {
            $("#analyse-job-list").append('<option value="'+ ele.jobname +'">'+ ele.jobname +'</option>')
            if(i == 0) {
                init(ele.jobname);
            }
        });
        form.render('select');
    });

    //搜索
    $(".search_btn").on("click",function(){
        var searchKey = $("#analyse-job-list").val();
        var dateScope = $("#datetime").val();

        if(searchKey != null && searchKey != ''){
            var startTime;
            var endTime;
            var date = new Date();
            var mothStr = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1):(date.getMonth() + 1);
            var dayStr = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            //昨天的时间
            var yesterday = new Date();
            yesterday.setTime(yesterday.getTime()-24*60*60*1000);
            if (dateScope == '1') {
                endTime = date.getFullYear() + "-" + mothStr + "-" + dayStr;
                startTime = yesterday.getFullYear() + "-" + (yesterday.getMonth()+1) + "-" + yesterday.getDate();
                init(searchKey,startTime,endTime);
            } else {
                init(searchKey);
            }
        } else {
            layer.msg("请选择日志分析项目");
        }
    });

    /**
     * 初始化统计图
     * @param jobname
     */
    function init(jobname,startTime,endTime) {
        $.post("/log/analysejob/append/minute/list",{indexName:jobname, startTime:startTime,endTime:endTime}, function (data) {
            var length = data.count;
            if (length == 0) {
                return null;
            }
            var seriesArrs = [];//pv uv统计数据等
            var xAxisdataArr = [];//x轴时间组件
            var topTitleMessageArr = ['pv统计','独立访客']; //顶部标题数组
            var pvSeriesArr = [];//pv统计数据
            var uvSeriesArr = [];//uv独立访客数据
            var pvcount = 0;//统计总量
            var uvcount = 0;//统计总量
            $("#echart-box").html("");
            $.each(data.data, function (i, ele) {
                pvcount += ele.pv;
                uvcount += ele.uv;
                pvSeriesArr.unshift(ele.pv);
                uvSeriesArr.unshift(ele.uv);
                var date = new Date(ele.executetime);
                var dateStr = date.getHours() + ":" + (date.getMinutes() < 10?'0' + date.getMinutes():date.getMinutes());
                xAxisdataArr.unshift(dateStr);
            });
            seriesArrs.push(pvSeriesArr);
            seriesArrs.push(uvSeriesArr);
            $("#pv").html(pvcount);
            $("#uv").html(uvcount);
            //渲染统计图
            setTrendData(xAxisdataArr, seriesArrs, topTitleMessageArr);
        });
    }


    /**
     * 渲染统计图效果，设置检测项目相应的数据统计
     * @param xAxisdataArr x轴坐标数据
     * @param seriesArr 展示数据
     * @param topTitleMessageArr 检测信息
     */
    function setTrendData(xAxisdataArr, seriesArrs, topTitleMessageArr) {

        var lineChart = echarts.init(document.getElementById('linechart'));
        lineChart.showLoading();

        //legend数据
        function setlegendData(topTitleMessageArr) {
            var legendDataArr = [];
            $.each(topTitleMessageArr,function (i, ele) {
                legendDataArr.push(ele);
            });
            return legendDataArr;
        }

        //series数据
        function setseriesData(seriesArrs) {
            var series = [];
            $.each(seriesArrs,function (i, ele) {
                var obj = {
                    name:topTitleMessageArr[i],
                    type:'line',
                    data:ele,
                    smooth:true,  //曲线变平滑
                    lineStyle: {
                        normal: {
                            //color:"#0f9ac3"
                            /*color: function(params) {
                                var num = myColor.length;
                                return myColor[params.dataIndex % num]
                            }*/
                        }
                    }
                };
                series.push(obj);
            });
            return series;
        }

        //折线图
        var option = {
            title: {
                text: '',
                textStyle:{//图例文字的样式
                    color:'#cdddf7',
                },
                padding: [20,0,0,10],
                x:'right',
                subtext: ''
            },
            tooltip: {
                trigger: 'axis'
            },
            legend: {
                textStyle:{//图例文字的样式
                    color:'#000',
                    // fontSize: 16
                },
                data:setlegendData(topTitleMessageArr)
            },
            color:[
                '#3385ff',    //温度曲线颜色
                '#f26214',    //湿度曲线颜色
                '#B15BFF',    //压强图颜色
                '#68CFE8',    //雨量图颜色
                '#FFDC35'    //风速曲线颜色
            ],
            toolbox: {
                show: true,
                feature: {
                    dataZoom: {
                        yAxisIndex: 'none'
                    },
                    dataView: {readOnly: false},
                    magicType: {type: ['line', 'bar']},
                    restore: {},
                    saveAsImage: {}
                }
            },
            grid: {
                left: '3%',
                right: '4%',
                bottom: '8%',
                containLabel: true
            },
            dataZoom: [{
                start: 75,
                end: 100
            }, {
                type: 'inside'
            }],
            /*dataZoom: {
                show: true,
                realtime : true,
                start: 75,
                end: 100,
                height: 20,
                backgroundColor: '#f8f8f8',
                dataBackgroundColor: '#e4e4e4',
                fillerColor: '#87cefa',
                handleColor: '#87cefa',
            },*/
            xAxis:  {
                type: 'category',
                boundaryGap: false,
                axisLabel: {
                    textStyle: {
                        color: '#333333'
                    },
                    formatter: function (value) {
                        return value + ""
                    },
                },
                //设置网格线颜色
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#ccc'],
                        width: 1,
                        type: 'solid'
                    }
                },
                data: xAxisdataArr
            },
            yAxis: {
                type: 'value',
                axisLabel: {
                    textStyle: {
                        color: '#333333'
                    },
                    formatter: '{value} '
                },
                //设置网格线颜色
                splitLine: {
                    show: true,
                    lineStyle:{
                        color: ['#ccc'],
                        width: 1,
                        type: 'solid'
                    }
                }
            },
            series: setseriesData(seriesArrs)
        };
        $("#loading").hide();
        lineChart.setOption(option);
        lineChart.hideLoading();

    }



});